<template>
  <div>
    <Dialog @cancel="visibleList = false" :footer="false" :visible.sync="visibleList" @close="visibleClose"
            :title="productQuery.alias + ' - ' + $t('绑定APP')" width="70%">
      <el-form label-width="80px" ref="searchForm" :model="page">
        <el-row :gutter="24">
          <el-col :span="14">
            <el-form-item :label="$t('APP名称')" prop="productName">
              <el-input v-model="page.productName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="text-align: right">
            <el-button type="primary" @click="getTableData">{{ $t('查询') }}</el-button>
            <el-button @click="resetList">{{ $t('重置') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: right;margin: 10px 0">
        <el-button type="primary" @click="unboundProduct" v-show="$permiss[163]">{{ $t('新增') }}</el-button>
      </div>
      <Table :table-data="tableData" :table-column="tableColumn" :page="page" @handleCurrentChange="listCurrentChange"
             @handleSizeChange="listSizeChange">
        <template slot="operate">
          <el-table-column :label="$t('操作')" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="editList(scope.row)" v-show="$permiss[167]">{{ $t('编辑') }}</el-button>
              <el-button type="text" @click="delList(scope.row)" v-show="$permiss[563]">{{ $t('删除') }}</el-button>
            </template>
          </el-table-column>
        </template>
      </Table>
      <Dialog
          width="40%"
          :title="$t('新增')"
          :visible.sync="visibleAdd"
          :append-body="true"
          :footer="$permiss[164] ? true : false"
          @cancel=" visibleAdd = false"
          @close="clearAddForm"
          @confirm="addConfirm"
      >
        <el-form label-width="80px" ref="addForm" :model="addPage">
          <el-row :gutter="24">
            <el-col :span="14">
              <el-form-item :label="$t('APP名称')" prop="productName">
                <el-input v-model="addPage.productName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" style="text-align: right">
              <el-button type="primary" @click="unboundProduct">{{ $t('查询') }}</el-button>
              <el-button @click="resetAddList">{{ $t('重置') }}</el-button>
            </el-col>
          </el-row>
        </el-form>
        <Table :table-data="productTableData" :page="false"
               @handleSelectionChange="unSelectProduct">
          <template slot="operate">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column align="center" :label="$t('APP名称')" prop="appName"></el-table-column>
            <el-table-column align="center" :label="$t('操作')">
              <template slot-scope="scope">
                <el-checkbox-group v-model="checkboxGroup">
                  <el-checkbox :label="scope.row.productId"
                               @change="checkBoxChange(scope.row,'payment',$event)">{{ $t('设为打款') }}
                  </el-checkbox>
                  <el-checkbox :label="scope.row.productName"
                               @change="checkBoxChange(scope.row,'collection',$event)">{{ $t('设为收款') }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </template>
        </Table>
      </Dialog>
      <Dialog
          width="30%"
          :title="$t('编辑')"
          :visible.sync="visibleEdit"
          @close="editRows = {}"
          @confirm="editConfirm"
          :append-body="true"
          @cancel="visibleEdit = false"
      >
        <el-form :model="editRows">
          <el-form-item>
            <el-checkbox style="margin-right: 10px" :value="editRows.payType === $t('是') ? true : false"
                         @change="editCheckBox($event,'payType')"
                         :label="$t('设为打款')"></el-checkbox>
            <span>{{ $t('是否默认') }}</span>
            <el-switch style="margin-left:  10px" @change="editSwitchChange($event,'payTheDefault')"
                       :value="editRows.payTheDefault === $t('是') ? true : false"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-checkbox style="margin-right: 10px" :value="editRows.refundType === $t('是') ? true : false"
                         @change="editCheckBox($event,'refundType')"
                         :label="$t('设为收款')"></el-checkbox>
            <span>{{ $t('是否默认') }}</span>
            <el-switch style="margin-left: 10px" @change="editSwitchChange($event,'refundTheDefault')"
                       :value="editRows.refundTheDefault === $t('是') ? true : false"></el-switch>
          </el-form-item>
        </el-form>
      </Dialog>
    </Dialog>
  </div>
</template>

<script>
import {deepClone} from "@/utils/tools";
import {bindingProductSearch,unboundProduct,offlinePayBindProduct,bindingProductDelete,bindingProductEdit} from '@/api/pay'
export default {
  props: {
    visible: {
      type: Boolean
    },
    productQuery: {},
  },
  data() {
    return {
      visibleList: false,
      visibleEdit: false,
      visibleAdd: false,
      editRows: {},
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      addPage: {},
      checkList: [],
      tableData: [],
      tableColumn: [
        {label: this.$t('APP名称'), prop: 'appName', align: 'center'},
        {label: this.$t('设为打款'), prop: 'payType', align: 'center'},
        {label: this.$t('是否为打款默认'), prop: 'payTheDefault', align: 'center'},
        {label: this.$t('设为收款'), prop: 'refundType', align: 'center'},
        {label: this.$t('是否为收款默认'), prop: 'refundTheDefault', align: 'center'},
      ],
      productTableData: [],
      selectProduct: [],
      checkboxGroup: []
    }
  },
  watch: {
    visible(val) {
      this.visibleList = val
      if (val && this.$permiss[162]) {
        this.getTableData()
      }
    }
  },

  methods: {
    async getTableData() {
      const {offlinePayId} = this.productQuery
      const res = await bindingProductSearch({
        ...this.page,
        offlinePayId
      })
      if (res.code === 1) {
        const {list, pageNum, pageSize, total} = res.data
        this.tableData = list.map(item => {
          item.status = item.status === 1 ? this.$t('启用') : this.$t('禁用')
          item.payType = item.payType === 1 ? this.$t('是') : this.$t('否')
          item.payTheDefault = item.payTheDefault === 1 ? this.$t('是') : this.$t('否')
          item.refundTheDefault = item.refundTheDefault === 1 ? this.$t('是') : this.$t('否')
          item.refundType = item.refundType === 1 ? this.$t('是') : this.$t('否')
          return item
        })
        this.page = Object.assign({}, this.page, {
          pageNum: pageNum,
          pageSize: pageSize,
          total: total
        })
      }
    },
    unSelectProduct(value) {
      this.selectProduct = value
    },
    visibleClose() {
      this.$emit('update:visible', false)
    },
    resetList() {
      this.$refs.searchForm.resetFields()
      this.getTableData()
    },
    // 未绑定app列表
    async unboundProduct() {
      const {offlinePayId, adminUserId} = this.productQuery
      const res = await unboundProduct({
        ...this.addPage,
        offlinePayId,
        adminUserId
      })
      if (res.code === 1) {
        this.productTableData = res.data
        this.visibleAdd = true
      }
    },
    checkBoxChange(row, type, value) {
      const data = this.productTableData.filter(item => {
        if (item.productName === row.productName) {
          if (type === 'payment') {
            value ? item['payType'] = 1 : item['payType'] = 0
          } else {
            value ? item['refundType'] = 1 : item['refundType'] = 0
          }
          return item
        }
      })
      this.checkList = data
    },
    // 设为收款
    editCheckBox(value, type) {
      this.editRows = Object.assign({}, this.editRows, {
        [type]: value ? this.$t('是') : this.$t('否')
      })
    },
    // 设为默认
    editSwitchChange(value, type) {
      if (this.editRows.payType === this.$t('否') && type === 'payTheDefault' && value) {
        return this.$message.error(this.$t('请先设为打款'))
      }
      if (this.editRows.refundType === this.$t('否') && type === 'refundTheDefault' && value) {
        return this.$message.error(this.$t('请先设为收款'))
      }
      this.editRows = Object.assign({}, this.editRows, {
        [type]: value ? this.$t('是') : this.$t('否')
      })
    },
    resetAddList() {
      this.$refs.addForm.resetFields()
      this.unboundProduct()
    },
    async addConfirm() {
      const selectProduct = this.selectProduct
      const checkList = this.checkList
      if (selectProduct.length === 0) return this.$message.error(this.$t('请选择APP'))
      if (checkList.length === 0) return this.$message.error(this.$t('请设置将此卡作为打款/收款'))
      const {offlinePayId, adminUserId} = this.productQuery
      const data = []
      for (let i = 0; i < selectProduct.length; i++) {
        if (!selectProduct[i].refundType && !selectProduct[i].payType) {
          return this.$message.error(this.$t('请设置将此卡作为打款/收款'))
        } else {
          data.push({...selectProduct[i], offlinePayId, adminUserId})
        }
      }
      const res = await offlinePayBindProduct(data)
      if (res.code === 1) {
        this.selectProduct = []
        this.visibleAdd = false
        this.getTableData()
        this.$message.success(this.$t('新增成功'))
      }
    },
    clearAddForm() {
      this.addPage = {}
      this.checkList = []
      this.checkboxGroup = []
    },
    delList(row) {
      this.$confirm(this.$t('确定删除?'), this.$t('提示'), {
        confirmButtonText: this.$t('确认'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(async () => {
        const res = await bindingProductDelete({
          id: row.id
        })
        if (res.code === 1) {
          this.$message({
            type: 'success',
            message: this.$t('删除成功')
          });
          this.getTableData()
        }
      });

    },
    editList(row) {
      this.editRows = deepClone(row)
      this.visibleEdit = true
    },
    // 编辑提交
    async editConfirm() {
      const {adminUserId} = this.productQuery
      const params = Object.assign({}, this.editRows, {
        payTheDefault: this.editRows.payTheDefault === this.$t('是') ? 1 : 0,
        payType: this.editRows.payType === this.$t('是') ? 1 : 0,
        refundTheDefault: this.editRows.refundTheDefault === this.$t('是') ? 1 : 0,
        refundType: this.editRows.refundType === this.$t('是') ? 1 : 0,
        status: this.editRows.status === this.$t('启用') ? 1 : 0,
        adminUserId: adminUserId
      })
      const res = await bindingProductEdit(params)
      if (res.code === 1) {
        this.$message.success(this.$t('编辑成功'))
        this.visibleEdit = false
        this.getTableData()
      }
    },
    // clearForm() {
    //   this.addPage = {}
    // },
    listCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    listSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    }
  },
  beforeDestroy() {
    this.$emit('update:visible', false)
  }
}
</script>

<style scoped>

</style>
